<!DOCTYPE html><html><head>
      <title>README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <!-- <link rel="stylesheet" href="file:////Users/Kerry/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.6.1/node_modules/@shd101wyy/mume/dependencies/katex/katex.min.css"> -->
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="leggo">leggo</h1>

<p>&#x62D6;&#x62FD;&#x5F0F;&#x524D;&#x7AEF;&#x8868;&#x5355;&#x751F;&#x6210;&#x4F4E;&#x4EE3;&#x7801;&#x5DE5;&#x5177;&#xFF5E;</p>
<blockquote>
<ul>
<li>&#x6F14;&#x793A;&#x5730;&#x5740;&#xFF1A;<a href="https://kerrycodes.github.io/">https://kerrycodes.github.io/</a></li>
<li>Github&#xFF1A;<a href="https://github.com/KerryCodes/leggo">https://github.com/KerryCodes/leggo</a></li>
<li>&#x5B89;&#x88C5;&#xFF1A;<code>npm i leggo</code></li>
</ul>
</blockquote>
<h2 class="mume-header" id="story">story</h2>

<p>&#x56E0;&#x4E3A;&#x8001;&#x5458;&#x5DE5;&#x7684;&#x79BB;&#x804C;&#xFF0C;&#x6211;&#x63A5;&#x624B;&#x4E86;&#x4E00;&#x4E2A;&#x5B8C;&#x5168;&#x7531;&#x8868;&#x5355;&#x7EC4;&#x6210;&#x7684;&#x53D1;&#x5E03;&#x6A21;&#x5757;&#xFF0C;&#x4E4B;&#x524D;&#x6211;&#x5E76;&#x6CA1;&#x6709;&#x770B;&#x8FC7;&#x4E1A;&#x52A1;&#x6E90;&#x7801;&#x3002;&#x540E;&#x7EED;&#x56E0;&#x4E3A;&#x63A5;&#x5165;&#x65B0;&#x7684;&#x9700;&#x6C42;&#x800C;&#x51B2;&#x8FDB;&#x53BB;&#x7EF4;&#x62A4;&#x8FD9;&#x5768;&#x4EE3;&#x7801;&#x3002;&#x6CE8;&#x610F;&#x6211;&#x7528;&#x4E86;&#x201C;&#x5768;&#x201D;&#x8FD9;&#x4E2A;&#x91CF;&#x8BCD;&#xFF0C;&#x4F60;&#x5E94;&#x8BE5;&#x660E;&#x767D;&#x6211;&#x5728;&#x8BF4;&#x4EC0;&#x4E48;&#x3002;&#x56E0;&#x4E3A;&#x6574;&#x4E2A;&#x6A21;&#x5757;&#x7F3A;&#x5C11;&#x9876;&#x5C42;&#x8BBE;&#x8BA1;&#xFF0C;&#x5BFC;&#x81F4;&#x7EF4;&#x62A4;&#x6210;&#x672C;&#x6781;&#x9AD8;&#xFF0C;&#x9891;&#x9891;&#x62A5;bug&#x3002;&#x4E8E;&#x662F;&#x5F00;&#x59CB;&#x601D;&#x8003;&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x80FD;&#x901A;&#x8FC7;&#x62D6;&#x62FD;&#x76F4;&#x63A5;&#x751F;&#x6210;&#x548C;&#x7EF4;&#x62A4;&#x8FD9;&#x4E9B;&#x8868;&#x5355;&#x5462;&#xFF1F;&#x4E8E;&#x662F;leggo&#x5C31;&#x6B64;&#x8BDE;&#x751F;&#xFF0C;&#x540D;&#x5B57;&#x6765;&#x6E90;&#x4E8E;&#x4E50;&#x9AD8;Lego&#xFF0C;&#x5BD3;&#x610F;&#x50CF;&#x642D;&#x79EF;&#x6728;&#x4E00;&#x6837;&#x5B8C;&#x6210;&#x8868;&#x5355;&#x7684;&#x8BBE;&#x8BA1;&#x3002;</p>
<h2 class="mume-header" id="leggo%E5%93%B2%E5%AD%A6">leggo&#x54F2;&#x5B66;</h2>

<ul>
<li>
<p>&#x867D;&#x7136;&#x5229;&#x7528;&#x4E86;&#x201C;&#x62D6;&#x62FD;&#x201D;&#x8FD9;&#x4E00;&#x6700;&#x76F4;&#x89C2;&#x7B80;&#x5355;&#x7684;&#x4EA4;&#x4E92;&#x65B9;&#x5F0F;&#x3002;&#x4F46;<strong>leggo&#x5E76;&#x975E;&#x9762;&#x5411;&#x975E;&#x524D;&#x7AEF;&#x4EBA;&#x5458;&#xFF0C;Leggo&#x662F;&#x4E00;&#x4E2A;&#x4E3A;&#x4E13;&#x4E1A;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x8005;&#x63D0;&#x5347;&#x6548;&#x7387;&#x7684;&#x5DE5;&#x5177;</strong></p>
</li>
<li>
<p><strong>leggo&#x4ECE;&#x4E00;&#x5F00;&#x59CB;&#x5C31;&#x6CA1;&#x6709;&#x60F3;&#x8981;&#x505A;&#x6210;&#x4E00;&#x4E2A;&#x5927;&#x800C;&#x5168;&#x7684;&#x8868;&#x5355;&#x914D;&#x7F6E;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;</strong> &#x7B2C;&#x4E00;&#x7248;&#x751A;&#x81F3;&#x53EA;&#x662F;&#x82B1;&#x4E86;&#x4E00;&#x4E2A;&#x4E0B;&#x5348;&#x4FBF;&#x544A;&#x5B8C;&#x6210;&#x3002;&#x6240;&#x4EE5;leggo&#x5E76;&#x4E0D;&#x4F1A;&#x4E3A;&#x4E86;&#x80FD;&#x591F;&#x5B9E;&#x73B0;&#x590D;&#x6742;&#x903B;&#x8F91;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x800C;&#x653E;&#x5F03;&#x6613;&#x7528;&#x6027;&#x3002;leggo&#x771F;&#x6B63;&#x8981;&#x505A;&#x7684;&#x662F;&#x5E2E;&#x52A9;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x5FEB;&#x901F;&#x642D;&#x5EFA;&#x548C;&#x7EF4;&#x62A4;&#x8868;&#x5355;&#x7ED3;&#x6784;&#xFF0C;&#x8F7B;&#x677E;&#x5B8C;&#x6210;&#x90A3;&#x4E9B;&#x65E0;&#x8111;&#x91CD;&#x590D;&#x642C;&#x7816;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x3002;&#x8FD9;&#x4F7F;&#x5F97;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x80FD;&#x591F;&#x66F4;&#x4E13;&#x6CE8;&#x4E8E;&#x5F00;&#x53D1;&#x62E5;&#x6709;&#x7279;&#x5B9A;&#x590D;&#x6742;&#x903B;&#x8F91;&#x4EA4;&#x4E92;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x3002;</p>
</li>
<li>
<p><strong>leggo&#x4FDD;&#x6301;&#x4E86;&#x51E0;&#x4E4E;&#x5B8C;&#x5168;&#x5F00;&#x653E;&#x7684;&#x81EA;&#x7531;&#x62D3;&#x5C55;&#x7A7A;&#x95F4;&#x3002;</strong> &#x4E0D;&#x4F46;&#x53EF;&#x62D6;&#x62FD;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x5E93;&#x80FD;&#x591F;&#x88AB;&#x81EA;&#x7531;&#x6CE8;&#x518C;&#x3002;&#x6240;&#x6709;&#x901A;&#x8FC7;leggo&#x6A21;&#x677F;&#x6E32;&#x67D3;&#x7684;&#x7EC4;&#x4EF6;&#x4E5F;&#x53EF;&#x4EE5;&#x8F7B;&#x677E;&#x7684;&#x88AB;&#x6574;&#x4F53;&#x8986;&#x76D6;&#x3001;&#x7EC4;&#x88C5;&#x6216;&#x91CD;&#x5199;&#x5C5E;&#x6027;&#x3002;&#x4F60;&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#x66B4;&#x9732;&#x5404;&#x79CD;&#x516C;&#x5171;&#x72B6;&#x6001;&#x548C;&#x51FD;&#x6570;&#x7ED9;leggo&#x6D88;&#x8D39;&#x3002;&#x6240;&#x4EE5;leggo&#x5E76;&#x975E;&#x53EA;&#x80FD;&#x5E94;&#x7528;&#x4E8E;&#x7B80;&#x5355;&#x7684;&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x573A;&#x666F;&#xFF0C;&#x8FD9;&#x5B8C;&#x5168;&#x53D6;&#x51B3;&#x4E8E;&#x5F00;&#x53D1;&#x8005;&#x7684;&#x5927;&#x80C6;&#x62D3;&#x5C55;&#x3002;</p>
</li>
<li>
<p><strong>&#x4E0A;&#x624B;&#x6210;&#x672C;&#x6781;&#x4F4E;&#x3002;</strong> &#x5982;&#x679C;&#x4F60;&#x719F;&#x6089;React&#x548C;Antd&#xFF0C;&#x5219;&#x4F60;&#x53EA;&#x9700;&#x8981;&#x5B66;&#x4E60;1-2&#x4E2A;leggo&#x7684;Api&#x5C31;&#x53EF;&#x4EE5;&#x5F00;&#x59CB;&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x90E8;&#x7F72;&#x3002;Antd&#x5E93;&#x4E2D;<code>Form</code>&#x3001;<code>Form.Item</code>&#x4EE5;&#x53CA;&#x76F8;&#x5173;input&#x7EC4;&#x4EF6;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x548C;&#x4E8B;&#x4EF6;&#x4ECD;&#x65E7;&#x53EF;&#x4EE5;&#x6B63;&#x5E38;&#x5B9A;&#x4E49;&#x548C;&#x4F7F;&#x7528;&#x3002;</p>
</li>
</ul>
<h2 class="mume-header" id="%E5%9F%BA%E7%A1%80%E5%BA%94%E7%94%A8">&#x57FA;&#x7840;&#x5E94;&#x7528;</h2>

<p>&#x5047;&#x8BBE;&#x4F60;&#x5DF2;&#x7ECF;&#x901A;&#x8FC7;<a href="https://kerrycodes.github.io/">leggo&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;</a>&#x751F;&#x6210;&#x4E86;&#x4E00;&#x4E2A;&#x8868;&#x5355;&#x6A21;&#x677F;&#xFF08;&#x83B7;&#x5F97;&#x4E00;&#x4E2A;JSON&#x5BF9;&#x8C61;&#xFF0C;&#x5373;&#x4E0B;&#x5217;&#x4EE3;&#x7801;&#x4E2D;<code>schemaModel</code>&#xFF09;&#xFF0C;&#x5219;&#x4EC5;&#x901A;&#x8FC7;&#x4EE5;&#x4E0B;2&#x884C;&#x4EE3;&#x7801;&#x4F60;&#x5C31;&#x5F97;&#x5230;&#x4E86;&#x5B9E;&#x9645;&#x9700;&#x8981;&#x7684;&#x8868;&#x5355;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-export">export</span> <span class="token keyword keyword-const">const</span> schemaModel<span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">//JSON</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> LeggoForm <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;leggo&apos;</span><span class="token punctuation">;</span>
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> schemaModel <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;./schemaModel&apos;</span><span class="token punctuation">;</span>


<span class="token keyword keyword-function">function</span> <span class="token function">MyForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> leggo<span class="token operator">=</span> LeggoForm<span class="token punctuation">.</span><span class="token function">useLeggo</span><span class="token punctuation">(</span>schemaModel<span class="token punctuation">)</span>
  
  <span class="token keyword keyword-return">return</span> <span class="token operator">&lt;</span>LeggoForm leggo<span class="token operator">=</span><span class="token punctuation">{</span>leggo<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
</pre><p>&#x6211;&#x4EEC;&#x4ECE;<code>leggo</code>&#x5BFC;&#x51FA;&#x4E86;<code>LeggoForm</code>&#xFF0C;&#x800C;<code>schemaModel</code>&#x662F;&#x901A;&#x8FC7;Leggo&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#x751F;&#x6210;&#x7684;JSON&#xFF0C;<code>LeggoForm</code>&#x8FD9;&#x4E2A;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x4F1A;&#x5C06;&#x6A21;&#x7248;JSON&#x89E3;&#x6790;&#x5E76;&#x6E32;&#x67D3;&#x6210;&#x5B9E;&#x9645;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x3002;</p>
<p>&#x4ECE;&#x4F7F;&#x7528;&#x7684;&#x89D2;&#x5EA6;&#x6765;&#x8BF4;<code>LeggoForm</code>&#x548C;Antd&#x4E2D;&#x7684;<code>Form</code>&#x51E0;&#x4E4E;&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5DEE;&#x522B;&#xFF08;&#x9664;&#x4E86;&#x5FC5;&#x987B;&#x8981;&#x6302;&#x8F7D;<code>leggo</code>&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#xFF09;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x5728;<code>LeggoForm</code>&#x4E0A;&#x5B9A;&#x4E49;&#x4EFB;&#x4F55;<code>Form</code>&#x7EC4;&#x4EF6;&#x5141;&#x8BB8;&#x7684;&#x5C5E;&#x6027;&#x5E76;&#x6B63;&#x5E38;&#x8FD0;&#x884C;&#xFF0C;&#x6BD4;&#x5982;&#x50CF;&#x4EE5;&#x4E0B;&#x8FD9;&#x6837;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-function">function</span> <span class="token function">MyForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> leggo<span class="token operator">=</span> LeggoForm<span class="token punctuation">.</span><span class="token function">useLeggo</span><span class="token punctuation">(</span>schemaModel<span class="token punctuation">)</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">[</span>form<span class="token punctuation">]</span><span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  <span class="token keyword keyword-return">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>LeggoForm leggo<span class="token operator">=</span><span class="token punctuation">{</span>leggo<span class="token punctuation">}</span> 
      form<span class="token operator">=</span><span class="token punctuation">{</span>form<span class="token punctuation">}</span> 
      labelCol<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
      wrapperCol<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
      onValuesChange<span class="token operator">=</span><span class="token punctuation">{</span>handleValuesChange<span class="token punctuation">}</span> 
      onFinish<span class="token operator">=</span><span class="token punctuation">{</span>hanldeFinish<span class="token punctuation">}</span> 
      <span class="token punctuation">.</span>
      <span class="token punctuation">.</span>
      <span class="token punctuation">.</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</pre><p>&#x8003;&#x8651;&#x5230;&#x4F60;&#x7684;&#x8868;&#x5355;&#x6A21;&#x677F;<code>schemaModel</code>&#x53EF;&#x80FD;&#x4E0D;&#x662F;&#x5B58;&#x5728;&#x672C;&#x5730;&#xFF0C;&#x800C;&#x9700;&#x8981;&#x4ECE;&#x670D;&#x52A1;&#x5668;&#x5F02;&#x6B65;&#x8FDC;&#x7A0B;&#x62C9;&#x53D6;&#xFF0C;&#x5219;&#x4F60;&#x53EF;&#x4EE5;&#x8FD9;&#x6837;&#x90E8;&#x7F72;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-function">function</span> <span class="token function">MyForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> leggo<span class="token operator">=</span> LeggoForm<span class="token punctuation">.</span><span class="token function">useLeggo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">[</span>form<span class="token punctuation">]</span><span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  
  <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    leggo<span class="token punctuation">.</span><span class="token function">resetSchemaModel</span><span class="token punctuation">(</span>schemaModel<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>schemaModel<span class="token punctuation">]</span><span class="token punctuation">)</span>

  <span class="token keyword keyword-return">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>LeggoForm leggo<span class="token operator">=</span><span class="token punctuation">{</span>leggo<span class="token punctuation">}</span> 
      form<span class="token operator">=</span><span class="token punctuation">{</span>form<span class="token punctuation">}</span> 
      labelCol<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
      wrapperCol<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> span<span class="token operator">:</span> <span class="token number">14</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
      onValuesChange<span class="token operator">=</span><span class="token punctuation">{</span>handleValuesChange<span class="token punctuation">}</span> 
      onFinish<span class="token operator">=</span><span class="token punctuation">{</span>hanldeFinish<span class="token punctuation">}</span> 
      <span class="token punctuation">.</span>
      <span class="token punctuation">.</span>
      <span class="token punctuation">.</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</pre><p>&#x7B80;&#x5355;&#x7684;&#x8868;&#x5355;&#x901A;&#x8FC7;&#x4EE5;&#x4E0A;&#x4EE3;&#x7801;&#x5DF2;&#x7ECF;&#x8DB3;&#x591F;&#x90E8;&#x7F72;&#x5E94;&#x7528;&#x4E86;&#x3002;&#x4E0B;&#x9762;&#x6211;&#x4EEC;&#x9010;&#x6B65;&#x5F15;&#x5165;&#x66F4;&#x590D;&#x6742;&#x7684;&#x573A;&#x666F;&#x3002;&#x4EE5;&#x4E0B;&#x662F;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x7684;&#x4E00;&#x4E2A;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x6CE8;&#x610F;&#x5230;&#x5728;&#x7EC4;&#x4EF6;&#x5230;&#x53F3;&#x4FA7;&#x6709;&#x4E00;&#x4E2A;&#x201C;&#x540C;&#x6B65;&#x201D;&#x6309;&#x94AE;&#x3002;&#x8FD9;&#x79CD;&#x4E2A;&#x6027;&#x5316;&#x7684;&#x7EC4;&#x4EF6;&#x5E76;&#x6CA1;&#x6709;&#x529E;&#x6CD5;&#x901A;&#x8FC7;&#x62D6;&#x62FD;&#x5B8C;&#x6210;&#x5168;&#x90E8;&#x8BBE;&#x8BA1;&#x3002;</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d67b3b3c16754116afb9a96528ddb61a~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>&#x4E0D;&#x8981;&#x7740;&#x6025;&#xFF0C;&#x6211;&#x4EEC;&#x5148;&#x901A;&#x8FC7;&#x62D6;&#x62FD;&#x5B8C;&#x6210;&#x5DE6;&#x4FA7;&#x7ECF;&#x5178;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x90E8;&#x5206;&#x7684;&#x8BBE;&#x8BA1;&#x3002;&#x53F3;&#x4FA7;&#x7684;&#x6309;&#x94AE;&#x6211;&#x4EEC;&#x53EA;&#x9700;&#x8981;&#x5728;&#x6E32;&#x67D3;&#x8868;&#x5355;&#x524D;&#x901A;&#x8FC7;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x6CE8;&#x5165;&#x5373;&#x53EF;&#xFF0C;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x5728;leggo&#x4E2D;&#x662F;&#x4F5C;&#x4E3A;&#x8868;&#x5355;&#x6E32;&#x67D3;&#x524D;&#x7075;&#x6D3B;&#x62D3;&#x5C55;&#x7684;&#x624B;&#x6BB5;&#x4E4B;&#x4E00;&#x3002;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> TConfigs <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;leggo/lib/interface&apos;</span><span class="token punctuation">;</span>


<span class="token keyword keyword-function">function</span> <span class="token function">MyForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> leggo<span class="token operator">=</span> LeggoForm<span class="token punctuation">.</span><span class="token function">useLeggo</span><span class="token punctuation">(</span>schemaModel<span class="token punctuation">,</span> middleware<span class="token punctuation">)</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">[</span>form<span class="token punctuation">]</span><span class="token operator">=</span> Form<span class="token punctuation">.</span><span class="token function">useForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  
  <span class="token comment">//  &#x5F02;&#x6B65;&#x7684;&#x60C5;&#x51B5;</span>
  <span class="token comment">//  useEffect(() =&gt; {</span>
  <span class="token comment">//    leggo.resetSchemaModel(schemaModel, middleware)</span>
  <span class="token comment">//  }, [schemaModel])</span>

  <span class="token keyword keyword-return">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>LeggoForm leggo<span class="token operator">=</span><span class="token punctuation">{</span>leggo<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>


<span class="token comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;</span>
<span class="token keyword keyword-function">function</span> <span class="token function">middleware</span><span class="token punctuation">(</span>configs<span class="token operator">:</span> TConfigs<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  configs<span class="token punctuation">.</span><span class="token function-variable function">Successor</span><span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> React<span class="token punctuation">.</span>PropsWithChildren<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>display<span class="token operator">:</span> <span class="token string">&apos;flex&apos;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token punctuation">{</span> props<span class="token punctuation">.</span>children <span class="token punctuation">}</span>
      <span class="token operator">&lt;</span>Button<span class="token operator">&gt;</span>&#x540C;&#x6B65;<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</pre><blockquote>
<p>&#x503C;&#x5F97;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x53EA;&#x4F1A;&#x5728;&#x6574;&#x4E2A;<code>schemaModel</code>&#x6CE8;&#x5165;&#x65F6;&#x6267;&#x884C;&#x3002;&#x65E0;&#x8BBA;&#x8868;&#x5355;&#x540E;&#x7EED;&#x5982;&#x4F55;&#x66F4;&#x65B0;&#x548C;&#x6E32;&#x67D3;&#xFF0C;&#x4E2D;&#x95F4;&#x51FD;&#x6570;&#x90FD;&#x4E0D;&#x4F1A;&#x8FD0;&#x884C;&#xFF08;&#x9664;&#x975E;&#x4F60;&#x53C8;&#x901A;&#x8FC7;<code>leggo.resetSchemaModel</code>&#x91CD;&#x65B0;&#x6CE8;&#x5165;&#x4E00;&#x4E2A;&#x65B0;&#x7684;<code>schemaModel</code>&#xFF09;&#x3002;&#x6240;&#x4EE5;&#x4F60;&#x4E0D;&#x9700;&#x8981;&#x62C5;&#x5FC3;&#x7531;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x53EF;&#x80FD;&#x5BFC;&#x81F4;&#x7684;&#x6027;&#x80FD;&#x95EE;&#x9898;&#x3002;</p>
</blockquote>
<p>&#x4F60;&#x4F1A;&#x6CE8;&#x610F;&#x5230;leggo&#x5F15;&#x64CE;&#x5728;&#x8FD0;&#x884C;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x65F6;&#x4E3A;&#x5176;&#x6CE8;&#x5165;&#x4E00;&#x4E2A;&#x53C2;&#x6570;<code>configs</code>&#x3002;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x975E;&#x5E38;&#x91CD;&#x8981;&#xFF0C;&#x5B83;&#x6765;&#x81EA;<code>schemaModel</code>&#xFF0C;&#x4F60;&#x901A;&#x8FC7;&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#x62D6;&#x62FD;&#x548C;&#x8BBE;&#x7F6E;&#x7684;&#x51E0;&#x4E4E;&#x6240;&#x6709;&#x53C2;&#x6570;&#x90FD;&#x5B58;&#x5728;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x4E2D;&#x3002;&#x5B9E;&#x9645;&#x4E0A;&#xFF0C;&#x6211;&#x4EEC;&#x6B63;&#x662F;&#x901A;&#x8FC7;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x5728;&#x6539;&#x9020;&#x7531;&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#x751F;&#x6210;&#x7684;<code>schemaModel</code>&#x3002;<code>configs</code>&#x4E2D;&#x6709;2&#x4E2A;&#x5173;&#x952E;&#x7684;&#x5C5E;&#x6027;<code>itemProps</code>&#x548C;<code>inputProps</code>&#x3002;</p>
<blockquote>
<p><strong>itemProps</strong></p>
<p>itemProps&#x5305;&#x542B;&#x7684;&#x53C2;&#x6570;&#x6709;name&#x3001;label&#x3001;rules&#x7B49;&#x3002;&#x6CA1;&#x9519;&#xFF0C;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x4F1A;&#x88AB;&#x76F4;&#x63A5;&#x6CE8;&#x5165;&#x8FDB;Form.Item&#x7EC4;&#x4EF6;&#xFF1A;</p>
<p><code>&lt;Form.Item {...itemProps} &gt;&lt;/Form.Item&gt;</code></p>
</blockquote>
<blockquote>
<p><strong>inputProps</strong></p>
<p>inputProps&#x5305;&#x542B;&#x7684;&#x53C2;&#x6570;&#x6709;disabled&#x3001;style&#x3001;placeholder&#x3001;htmlType&#x7B49;&#x3002;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x4F1A;&#x88AB;&#x76F4;&#x63A5;&#x6CE8;&#x5165;&#x8FDB;input&#x76F8;&#x5173;&#x7EC4;&#x4EF6;&#xFF1A;</p>
<p><code>&lt;Input {...inputProps} /&gt;</code></p>
<p><code>&lt;Checkbox.Group {...inputProps} /&gt;</code></p>
<p><code>&lt;DatePicker {...inputProps} /&gt;</code></p>
</blockquote>
<p>&#x7136;&#x540E;&#x4F60;&#x53D1;&#x73B0;&#x5728;&#x8868;&#x5355;&#x6E32;&#x67D3;&#x524D;&#xFF0C;&#x901A;&#x8FC7;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x4F60;&#x6709;&#x8DB3;&#x591F;&#x7684;&#x673A;&#x4F1A;&#x53BB;&#x62D3;&#x5C55;&#x6574;&#x4E2A;&#x8868;&#x5355;&#x7684;&#x8BBE;&#x8BA1;&#xFF0C;&#x6BD4;&#x5982;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-function">function</span> <span class="token function">middleware</span><span class="token punctuation">(</span>configs<span class="token operator">:</span> TConfigs<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> itemProps<span class="token punctuation">,</span> inputprops <span class="token punctuation">}</span><span class="token operator">=</span> configs
  
  <span class="token keyword keyword-if">if</span><span class="token punctuation">(</span>itemProps<span class="token punctuation">.</span>name <span class="token operator">!==</span> <span class="token string">&apos;test&apos;</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token punctuation">}</span> <span class="token comment">//&#x7B5B;&#x9009;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x6539;&#x9020;&#x7684;&#x8868;&#x5355;</span>
  
  itemProps<span class="token punctuation">.</span>label<span class="token operator">=</span> <span class="token string">&apos;test2&apos;</span> <span class="token comment">//&#x6211;&#x4EEC;&#x66F4;&#x6362;&#x4E86;label</span>
  
  itemProps<span class="token punctuation">.</span>options<span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token comment">//&#x6211;&#x4EEC;&#x66F4;&#x6362;&#x4E86;&#x9009;&#x9879;&#x7C7B;&#x7EC4;&#x4EF6;&#x6240;&#x9700;&#x8981;&#x7684;options&#x6570;&#x636E;</span>
    <span class="token punctuation">{</span>label<span class="token operator">:</span> <span class="token string">&apos;&#x6D59;&#x6C5F;&apos;</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">&apos;zj&apos;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>label<span class="token operator">:</span> <span class="token string">&apos;&#x798F;&#x5EFA;&apos;</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">&apos;fj&apos;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
  
  configs<span class="token punctuation">.</span><span class="token function-variable function">Successor</span><span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> React<span class="token punctuation">.</span>PropsWithChildren<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>display<span class="token operator">:</span> <span class="token string">&apos;flex&apos;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token punctuation">{</span> props<span class="token punctuation">.</span>children <span class="token punctuation">}</span>
      <span class="token operator">&lt;</span>Button<span class="token operator">&gt;</span>&#x540C;&#x6B65;<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span> 
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token comment">//&#x6211;&#x4EEC;&#x5728;&#x8868;&#x5355;&#x53F3;&#x4FA7;&#x589E;&#x52A0;&#x4E86;&#x4E00;&#x4E2A;&#x6309;&#x94AE;</span>
  
  configs<span class="token punctuation">.</span><span class="token function-variable function">SuperSuccessor</span><span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Form<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">&quot;newOne&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;newOne&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Input <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Item<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token comment">//&#x6211;&#x4EEC;&#x751A;&#x81F3;&#x7528;&#x4E00;&#x4E2A;&#x5168;&#x65B0;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x5B8C;&#x5168;&#x8986;&#x76D6;&#x548C;&#x4E22;&#x5F03;&#x4E86;&#x539F;&#x6709;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;</span>
<span class="token punctuation">}</span>
</pre><blockquote>
<p><strong>Successor &#x548C; SuperSuccessor</strong></p>
<p>&#x5BF9;&#x4E8E;&#x590D;&#x6742;&#x7684;&#x8868;&#x5355;&#x6765;&#x8BF4;&#xFF0C;<code>Successor</code> &#x548C; <code>SuperSuccessor</code>&#x975E;&#x5E38;&#x6709;&#x7528;&#xFF0C;&#x5B83;&#x662F;&#x5F00;&#x53D1;&#x8005;&#x5229;&#x7528;leggo&#x4E13;&#x6CE8;&#x4E8E;&#x590D;&#x6742;&#x903B;&#x8F91;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x7684;&#x5173;&#x952E;&#x3002;leggo&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#x4E2D;&#x6240;&#x8C13;&#x7684;<strong>&#x5360;&#x4F4D;&#x8868;&#x5355;</strong>&#x7EC4;&#x4EF6;&#x5373;&#x662F;&#x4E3A;<code>Successor</code> &#x548C; <code>SuperSuccessor</code>&#x7684;&#x66FF;&#x6362;&#x64CD;&#x4F5C;&#x9884;&#x7559;&#x4E86;&#x7ED3;&#x6784;&#x7A7A;&#x95F4;&#x3002;</p>
<p>&#x533A;&#x522B;&#x5728;&#x4E8E;&#xFF0C;<code>Successor</code>&#x53EA;&#x662F;&#x5BF9;&#x539F;&#x6709;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x6539;&#x9020;&#xFF08;&#x539F;&#x6709;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x901A;&#x8FC7;children&#x7684;&#x65B9;&#x5F0F;&#x4F20;&#x7ED9;&#x5B83;&#xFF0C;<code>itemProps</code>&#x548C;<code>inputprops</code>&#x4ECD;&#x65E7;&#x4F1A;&#x6CE8;&#x5165;&#xFF09;&#x3002;&#x800C;<code>SuperSuccessor</code>&#x5219;&#x975E;&#x5E38;&#x6FC0;&#x8FDB;&#x7684;&#x8986;&#x76D6;&#x548C;&#x4E22;&#x5F03;&#x4E86;&#x539F;&#x6709;&#x7684;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#xFF08;<code>itemProps</code>&#x548C;<code>inputprops</code>&#x4E5F;&#x88AB;&#x4E22;&#x5F03;&#xFF09;&#x3002;</p>
</blockquote>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token operator">&lt;</span><span class="token maybe-class-name">Form</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Item</span></span> <span class="token punctuation">{</span><span class="token spread operator">...</span>itemProps<span class="token punctuation">}</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token maybe-class-name">Successor</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token maybe-class-name">Input</span> <span class="token punctuation">{</span><span class="token spread operator">...</span>inputprops<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token maybe-class-name">Successor</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token maybe-class-name">Form</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Item</span></span><span class="token operator">&gt;</span> 
</pre><pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token operator">&lt;</span><span class="token maybe-class-name">SuperSuccessor</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</pre><p>&#x4EE5;&#x4E0A;&#x662F;&#x901A;&#x8FC7;&#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x4E00;&#x6B21;&#x6027;&#x7684;&#x6539;&#x9020;<code>schemaModel</code>&#x3002;&#x800C;&#x5982;&#x679C;&#x4F60;&#x9700;&#x8981;&#x968F;&#x65F6;&#x6539;&#x53D8;&#x8868;&#x5355;&#x7684;&#x6E32;&#x67D3;&#x65B9;&#x5F0F;&#xFF0C;&#x6BD4;&#x5982;<code>disabled</code>&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x4EFB;&#x610F;&#x65F6;&#x673A;&#x901A;&#x8FC7;&#x8C03;&#x7528;<code>leggo.updateSchema</code>&#x6765;&#x5B9E;&#x73B0;&#x3002;&#x6BCF;&#x4E2A;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x662F;&#x5355;&#x72EC;&#x91CD;&#x6E32;&#x67D3;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x4F60;&#x4E5F;&#x4E0D;&#x9700;&#x8981;&#x8003;&#x8651;&#x6027;&#x80FD;&#x7684;&#x95EE;&#x9898;&#x3002;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token comment">// &#x53EF;&#x4EE5;&#x968F;&#x65F6;&#x8C03;&#x7528;</span>
leggo<span class="token punctuation">.</span><span class="token function">updateSchema</span><span class="token punctuation">(</span><span class="token string">&apos;select&apos;</span><span class="token punctuation">,</span> configs <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> inputprops <span class="token punctuation">}</span><span class="token operator">=</span> configs
  inputprops<span class="token punctuation">.</span>disabled<span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


<span class="token comment">// &#x4E2D;&#x95F4;&#x4EF6;&#x51FD;&#x6570;&#x5B9E;&#x73B0;&#x65B9;&#x5F0F;&#xFF08;&#x6CE8;&#x610F;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x53EA;&#x4F1A;&#x8FD0;&#x884C;&#x4E00;&#x6B21;&#xFF01;&#xFF09;&#xFF1A;</span>
<span class="token keyword keyword-function">function</span> <span class="token function">middleware</span><span class="token punctuation">(</span>configs<span class="token operator">:</span> TConfigs<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> itemProps<span class="token punctuation">,</span> inputprops <span class="token punctuation">}</span><span class="token operator">=</span> configs
  <span class="token keyword keyword-if">if</span><span class="token punctuation">(</span>itemProps<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">&apos;select&apos;</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
    inputprops<span class="token punctuation">.</span>disabled<span class="token operator">=</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</pre><h2 class="mume-header" id="%E9%AB%98%E7%BA%A7%E5%BA%94%E7%94%A8">&#x9AD8;&#x7EA7;&#x5E94;&#x7528;</h2>

<p>&#x597D;&#x7684;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x8FDB;&#x4E00;&#x6B65;&#x5F15;&#x5165;&#x66F4;&#x590D;&#x6742;&#x7684;&#x8BBE;&#x8BA1;&#x573A;&#x666F;&#x3002;&#x5047;&#x8BBE;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x8BBE;&#x8BA1;&#x4E00;&#x4E2A;&#x5141;&#x8BB8;&#x6570;&#x636E;&#x8054;&#x52A8;&#x7684;&#x8868;&#x5355;&#xFF0C;&#x65E5;&#x671F;&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x5FC5;&#x9009;&#x7531;&#x201C;&#x5355;&#x9009;&#x201D;&#x8FD9;&#x4E2A;&#x7EC4;&#x4EF6;&#x7684;&#x503C;&#x51B3;&#x5B9A;&#x3002;</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13ce9a7bd22946e2aff84be87c3909a6~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>&#x5219;&#x6211;&#x4EEC;&#x53EA;&#x9700;&#x8981;&#x901A;&#x8FC7;leggo&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#x8BBE;&#x7F6E;&#x6570;&#x636E;&#x5173;&#x8054;&#x548C;&#x7B80;&#x5355;&#x7684;&#x903B;&#x8F91;&#x8FD0;&#x7B97;&#x64CD;&#x4F5C;&#x5373;&#x53EF;&#x3002;</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0de7822943314e43bc5f5176aa546b5d~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<blockquote>
<p><code>[{label: &apos;&#x5FC5;&#x9009;&#x65E5;&#x671F;&apos;, value: 1}, {label: &apos;&#x975E;&#x5FC5;&#x9009;&#x65E5;&#x671F;&apos;, value: 2}]</code></p>
</blockquote>
<p>&#x5982;&#x679C;&#x6211;&#x4EEC;&#x7684;&#x5173;&#x8054;&#x503C;&#x662F;&#x5728;&#x7A0B;&#x5E8F;&#x8FD0;&#x884C;&#x65F6;&#x624D;&#x80FD;&#x62FF;&#x5230;&#x7684;&#xFF0C;&#x5219;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x5728;&#x8868;&#x5355;&#x5B9E;&#x9645;&#x6E32;&#x67D3;&#x524D;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x516C;&#x5171;&#x72B6;&#x6001;&#x5373;&#x53EF;&#x3002;&#x516C;&#x5171;&#x72B6;&#x6001;&#x65E2;&#x53EF;&#x4EE5;&#x662F;&#x503C;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x51FD;&#x6570;&#xFF0C;leggo&#x5F15;&#x64CE;&#x4F1A;&#x81EA;&#x52A8;&#x8BC6;&#x522B;&#x3002;</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a0f5be3652b45a3971430050853e04f~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p>&#x8FD8;&#x6709;&#x4E00;&#x79CD;&#x5E38;&#x89C1;&#x7684;&#x573A;&#x666F;&#x5C31;&#x662F;&#x5173;&#x4E8E;Select&#x6216;Radio&#x7B49;&#x7EC4;&#x4EF6;&#x9700;&#x8981;&#x8FDC;&#x7A0B;&#x62C9;&#x53D6;options&#x6570;&#x636E;&#xFF0C;&#x901A;&#x8FC7;leggo&#x4E5F;&#x540C;&#x6837;&#x53EF;&#x4EE5;&#x5F88;&#x65B9;&#x4FBF;&#x5B9E;&#x73B0;&#x8FD9;&#x6837;&#x7684;&#x9700;&#x6C42;&#x3002;</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c317085f28c74c0da31306ce0f0adb04~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eeeb114a75d84fec990b4d3d63792e00~tplv-k3u1fbpfcp-watermark.image?" alt="image.png"></p>
<blockquote>
<p>&#x5E26;&#x6709;&#x5173;&#x8054;&#x6309;&#x94AE;&#x7684;&#x6570;&#x636E;&#x90FD;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5173;&#x8054;&#x6570;&#x636E;</p>
</blockquote>
<h2 class="mume-header" id="leggo%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1%E5%99%A8">leggo&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;</h2>

<blockquote>
<p>&#x6F14;&#x793A;&#x5730;&#x5740;&#xFF1A;<a href="https://kerrycodes.github.io/">https://kerrycodes.github.io/</a></p>
</blockquote>
<p>&#x5982;&#x679C;&#x4F60;&#x9700;&#x8981;&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x76F4;&#x63A5;&#x90E8;&#x7F72;&#x8FD9;&#x4E2A;&#x8868;&#x5355;&#x8BBE;&#x8BA1;&#x5668;&#xFF0C;&#x5219;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5F15;&#x5165;<code>LeggoConfigs</code>&#x7EC4;&#x4EF6;&#xFF0C;<code>onGetSchemaModel</code>&#x5C5E;&#x6027;&#x4F1A;&#x5728;<code>schemaModel</code>&#x751F;&#x6210;&#x540E;&#x81EA;&#x52A8;&#x6CE8;&#x5165;&#x548C;&#x6267;&#x884C;&#xFF0C;&#x6837;&#x5F0F;&#x9700;&#x8981;&#x624B;&#x52A8;&#x5F15;&#x5165;&#x3002;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="typeScript" class="language-typescript"><span class="token keyword keyword-import">import</span> <span class="token string">&apos;leggo/lib/styles/configs.less&apos;</span>

<span class="token keyword keyword-function">function</span> <span class="token function-variable function">postSchemaModelData</span><span class="token operator">=</span> <span class="token punctuation">(</span>schemaModel<span class="token operator">:</span> TSchemaModel<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&apos;&#x53D1;&#x9001;schema&#xFF5E;&#xFF5E;&#xFF5E;&#xFF5E;&#xFF5E;&#xFF5E;&apos;</span><span class="token punctuation">,</span> schemaModel<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</pre><blockquote>
<p><strong>&#x91CD;&#x8981;&#xFF01;</strong></p>
<p>&#x9879;&#x76EE;&#x5730;&#x5740;&#xFF1A;<a href="https://github.com/KerryCodes/leggo">https://github.com/KerryCodes/leggo</a></p>
<p>&#x5165;&#x884C;&#x5FEB;&#x4E00;&#x5E74;&#x4E86;&#xFF0C;&#x7F16;&#x4E4E;&#x4E0A;&#x6CA1;&#x53D1;&#x8FC7;&#x56DE;&#x7B54;&#x90FD;&#x6512;&#x4E86;20&#x4E2A;&#x7C89;&#x4E1D;&#x4E86;&#xFF0C;Github&#x7684;star&#x4ECD;&#x65E7;&#x6302;0&#xFF01;&#xFF01;&#xFF01;&#x5404;&#x4F4D;&#x5927;&#x4F6C;&#x80FD;&#x4E0D;&#x80FD;&#x52A8;&#x52A8;&#x91D1;&#x624B;&#x6307;&#xFF0C;&#x8BA9;&#x6211;&#x4F53;&#x9A8C;&#x4E00;&#x4E0B;star&#x7684;&#x5FEB;&#x611F;&#xFF5E;</p>
</blockquote>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>